<template>
	<view class="">
		<view class="tab_Box">
			<view class="tab_list" v-for="(item,index) in porps.arrs" :key="index">
				<view :class="value==index?'title_as':''" @click="onChange(index,item)"
					:style="{'font-size':fz||'28rpx',color:onColor(value,index,1)}">{{showItem(item)}}</view>
				<view :style="{background:onColor(value,index,2),width:porps.width2||'46rpx' }" />
			</view>
		</view>
	</view>
</template>

<script setup>
	let porps = defineProps({
		value: Number,
		arrs: Array,
		color: String,
		activeColor: String,
		itemColor: String,
		fz: String,
		width2: String,
		keyName: String
	})
	let emit = defineEmits(['change'])
	const showItem = (item) => {
		if (typeof item == "string") {
			return item
		} else {
			return item[porps.keyName]
		}
	}
	const onColor = (value, index, type) => {
		//type==2横条颜色type==1字体颜色
		if (value == index && type == 1) return porps.activeColor ? porps.activeColor : '#000000';
		if (value !== index && type == 1) return porps.color ? porps.color : '#999999';
		if (value == index && type == 2) return porps.itemColor ? porps.itemColor : '#318FFE';
		if (value !== index && type == 2) return '#FFFFFF';
	}
	const onChange = (indexs, item) => {
		let parems = {
			index: indexs,
			data: item
		}
		emit('change', parems)
	}
</script>

<style scoped>
	.tab_Box {
		text-align: center;
		display: flex;
		justify-content: space-around;
		background: #FFFFFF;
	}

	.tab_list {
		background: #FFFFFF;
		font-size: 28rpx;
	}

	.tab_list>view:nth-child(1) {
		line-height: 70rpx;
	}

	.tab_list>view:nth-child(2) {
		height: 6rpx;
		margin: 0 auto;
		border-radius: 4rpx;
	}

	.title_as {
		transition: color 1s;
		font-weight: bold;
	}
</style>
